<layout name="layout" />
<style>
    .success{
        background: url(/Img/T1ySXRXthfXXbSBwfc-30-30.png) right bottom no-repeat;
        height: 30px;
    }
    .toggle {
        margin: 20px;
    }
    .label-decoration{
        line-height: 30px;
    }.adgroup-creative{
        padding-bottom:10px; 
    }
</style>
<div class="pageheader notab">
    <ul class="breadcrumbs breadcrumbs2"  >
        <li>
            <a href="/">首页 / 全部推广计划</a><span class="divider">&#187;</span>
        </li>
        <li style="margin-right: 0;"><a href="/promote/smart"> 重力主打优化</a></li>
        <li><span class="divider">&#187;</span></li>
        <li>设置创意</li>
    </ul>
</div>
<form method="post" action="/promote/smart?step=3" class="" id="setupform">
    <input type="hidden" name="campaign_id" id="campaign_id" value="{$campaign_id}">
    <input type="hidden" name="product_id" id="product_id" value="{$product_id}">
    <input type="hidden" name="budget" id="budget" value="{$budget}">
    <input type="hidden" name="limit" id="limit" value="{$limit}">
    <div id="creatives">
        
    </div>
    <div style="margin-top: 10px;text-align: center;">
        <input type="hidden" name="J_autoDrive" value="smart">
        <a  id="start_quick_campaign" class="next_step login-btn" href="javascript:void(0);">完成推广</a>
    </div>
</form>

<script type="text/html" id="products">
    <div class="row product_div" style="width:1198px;box-sizing:border-box;padding:0;margin: 10px 0 0 0;">
        <div style="margin-bottom: 20px;text-align: center;box-sizing: border-box;" class="label-decoration one" >
            <div class="chenkCreative">
                <label style="font-size:15px;padding-bottom:5px;box-sizing:border-box;" class="item-title box-sizing:border-box;" disabled="true"></label>
                <a href="javascript:void(0);" class="toggle">设置创意</a>
            </div>
        </div>
        <div class="adgroup-creative" style="text-align:center;">

        </div>
    </div>
</script>
<script>
    var creativeCount = 2;

    var items = {$itemInfo};

    //点击下滑事件
    $(document).ready(function(){
        // $(".div.adgroup-creative").toggle(function(){
        //   $(this).parent().next(".adgroup-creative").animate({height: 'toggle', opacity: 'toggle'}, "slow");
        //  },function(){
//$(this).parent().next(".adgroup-creative").animate({height: 'toggle', opacity: 'toggle'}, "slow");
        //});
        $("div.adgroup-creative").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者
        $(".toggle").click(function(){
            $(this).parents('.label-decoration').next(".adgroup-creative").slideToggle("slow");
        })
    });

    (function($) {
        var _COUNT_CHECK = 0;
        init(items);
        function init(items) {
            $.each(items, function(){
                var item = this;
                creativeInfo = {
                    1 : {
                        title : item.title,
                        img_url : item.item_imgs[0]
                    },
                    2 : {
                        title : item.title,
                        img_url : item.img_count >= 2 ? item.item_imgs[1] : item.item_imgs[0]
                    }
                };
                var $container = $(template.render("products", {}));
                createInit(item, creativeInfo, $container);
                $container.appendTo($("#creatives"));
            });
        }
        function createInit(itemInfo, creativeInfo, $container) {
            var creativeHtml = '';
            for (var i = 1; i <= creativeCount; i++) {
                creativeHtml += "<div class=\"creative\" data-num_id=\""+itemInfo.num_iid+"\" style=\"margin-left: 0;margin-right: 0\" data-creative=\""+i+"\">" +
                        "<div style=\'display: inline-block;margin-right: 70px;\'>"+
                        "<label class=\"label-decoration\" style=\"width:160px;margin-bottom:7px;\">推广内容"+i+"<\/label>" +
                        "<div class=\"product_img\" style=\"display: inline-block\">" +
                        "</div>"+
                        "<div class=\"photopreview\" >" +
                        "<img class=\"th\" width=\"175px\" id=\"creative_img"+i+"_"+itemInfo.num_iid+"\" src=\""+creativeInfo[i].img_url+"_160x160.jpg \">" +
                        "<\/div><\/div>" +
                        "<div class=\"product_detail\" style=\"display:inline-block\">" +
                        "<div class=\"last\" id=\"img_list"+i+"_"+itemInfo.num_iid+"\">" +
                        "<label class=\"label-decoration\" style=\"width:100%;box-sizing:border-box;\">创意图片"+i+" :<\/label>" +
                        "<div class=\"field imgs_selector\" style=\"text-align：justify; text-justify:distribute-all-lines; /* for ie */\">"
                for (var j = 0; j < itemInfo.img_count; j++) {
                    creativeHtml += "<div class=\"listed_pic picture"+i;
                    if(itemInfo.item_imgs[j] == creativeInfo[i].img_url) {
                        creativeHtml += " selected";
                    }
                    creativeHtml += "\" rel=\""+itemInfo.num_iid+"\"><a href=\"javascript:void(0);\"><img class=\"creative-img\" width=\"110px\"  src=\""+itemInfo.item_imgs[j]+"_160x160.jpg\" data-src=\""+itemInfo.item_imgs[j]+"\" name=\"itemImg\"><\/a><\/div>";
                };
                creativeHtml += "<input type=\"hidden\" name=\"creative["+itemInfo.num_iid+"]["+i+"][img_url]\" value=\""+creativeInfo[i].img_url+"\" id=\"selected_img"+i+"_"+itemInfo.num_iid+"\"><\/div><br class=\"clear\"><\/div><p style=\"text-align: left;width:100%\"><label>推广标题"+i+" (不超过20个汉字)<\/label><label id=\"titleLengthLimit"+i+"_"+itemInfo.num_iid+"\" style=\"padding: 5px\"><\/label><br/><input type=\"text\" name=\"creative["+itemInfo.num_iid+"]["+i+"][title]\" class=\"product_title title"+i+"\" value=\""+creativeInfo[i].title+"\" rel=\""+itemInfo.num_iid+"\" maxlength=\"40\" onpropertychange=\"wt.limitTextByte(this,40,&quot;titleLengthLimit"+i+"_"+itemInfo.num_iid+"&quot;)\" oninput=\"wt.limitTextByte(this,40,&quot;titleLengthLimit"+i+"_"+itemInfo.num_iid+"&quot;)\"  style=\"width:640px\"><\/p><\/div><\/div>";
            };
            creativeHtml+="<a href=\"javascript:;\" class=\"actionBtn\">保存</a>";
            $container.find('.item-title').text(itemInfo.title);
            $container.find('.adgroup-creative').html(creativeHtml);
        }

        $('.actionBtn').on('click', function() {
            var $this = $(this);
            $obj = $this.parents('.product_div').find('.chenkCreative');
            if(!$obj.hasClass('success')) {
                $obj.addClass('success');
                _COUNT_CHECK++;
            }
            $obj.find('.toggle').click();
        })
        
        $('.creative-img').on('click', function() {
            var $this = $(this),
                $parents = $this.parents('.creative'),
                creative_id = $parents.attr('data-creative'),
                imgUrl = $this.attr('src'),
                inputImgUrl = $this.attr('data-src'),
                num_iid = $parents.attr('data-num_id');
            $('#selected_img' + creative_id + '_' + num_iid).val(inputImgUrl);
            $('#creative_img' + creative_id + '_' + num_iid).attr('src', imgUrl);
            $parents.find('.listed_pic').removeClass('selected');
            $this.parents('.listed_pic').addClass('selected');
        });

        $('#start_quick_campaign').click(function() {
            if($('.product_div').length !== _COUNT_CHECK) {
                wt.showBox('请设置宝贝创意，完成后并点击保存按钮', '温馨提示');
                return false;
            }
            var check = ['campaign_id','product_id','budget','limit'];
            for (var i = 0; i < check.length; i++) {
                if($('#'+check[i]).val() == '') {
                    wt.showBox('参数错误，请重试！', '温馨提示');
                    return false;
                }
            };
            $("#setupform").submit();
        })
    })(jQuery);
</script>